<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-10 16:33:41
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-21 09:03:51
 * @Description: 
-->
<template>
  <el-menu router class="el-menu-demo" mode="horizontal" :ellipsis="false">
    <span class="logo">
      <img style="width: 50px" :src="logo" />
      HORIZON
    </span>
    <span class="logo">
      <el-button
        link
        @click="toggle"
        class="icon-toggle"
        circle
        :icon="toggleIcon"
      ></el-button>
    </span>
    <span class="logo">
      <el-tag>{{ admin.role_name }}</el-tag>
    </span>
    <span class="logo">
      Welcome back, {{ admin?.sex === "男" ? "Mr." : "Ms." }}
      {{ admin.fullname }}.
    </span>
    <div class="flex-grow" />
    <el-menu-item>
      <el-icon><Search /></el-icon>
      Search...</el-menu-item
    >
    <el-sub-menu index="/admin/info">
      <template #title>
        <el-avatar :src="admin.avatar">{{ admin.fullname }}</el-avatar>
      </template>
      <el-menu-item index="/admin/home">首页</el-menu-item>
      <el-menu-item index="/admin/info">账户管理</el-menu-item>
      <el-menu-item @click="layOut" index="2-3">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import logo from "@/assets/img/logo.png";
import { useRouter } from "vue-router";

const router = useRouter();

const store = useStore();
const toggleIcon = computed(() => {
  return store.getters["Menu/toggleIcon"];
});
const toggle = () => store.commit("Menu/toggle");

// 获取 admin 详细信息
const id = sessionStorage.id;
store.dispatch("Account/loadProfile", id);
const admin = computed(() => {
  return store.state.Account.profile;
});

// 退出登录
const layOut = () => {
  sessionStorage.clear();
  router.replace("/login");
  ElMessage.success("退出成功");
};
</script>

<style lang="less" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  .el-button {
    font-size: 20px;
    color: #000000 !important;
  }
}
.flex-grow {
  flex-grow: 1;
}
</style>
